<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>ele实时编辑器</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">

	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<script src="jquery.min.js"></script>

	<link rel="stylesheet" href="./element/element.css">
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="./element/element.js"></script>
	<script type="text/javascript" src="request.js"></script>
	<!-- import CSS -->
	<link rel="stylesheet" href="index.css">
	<!-- import JavaScript -->
	<!-- <script src="https://unpkg.com/mint-ui/lib/index.js"></script> -->
	<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->

	<style>

	</style>

</head>

<body>

	<div id="vue_test">
		<!-- <template>
			<el-select v-model="value" multiple="" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</template> -->
		<el-input-number v-model="inputNumber"></el-input-number>
	</div>
	<div id="page">

		<!-- <el-switch v-model="switch1">
				</el-switch>

		<div class="handler switch" v-show="item.show" v-for="(item,index) in switch_list">
			<i class="el-icon-circle-close" @click="remove(item,index,'switch')"></i>
			<el-switch v-model="item.value">
			</el-switch>
		</div>




		<div class="handler select" v-show="item.show" v-for="(item,index) in select_list">
			<i class="el-icon-circle-close" @click="remove(item,index,'select')"></i>
			<el-select v-model="item.value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div> -->



		<div v-for="(item,index) in item_list">

			<div v-if="item.name == 'inputNumber'" class="handler inputNumber" :class="index==cur_index?'cur':''"
				:id="'inputNumber'+index" @mouseover="select_cur(item,index,'inputNumber')">
				<i class="el-icon-circle-close" @click="remove(item,index,'inputNumber')"></i>

				<template id="inputNumber_template">
					<el-input-number v-model="item.value"></el-input-number>

				</template>

			</div>


			<div v-if="item.name == 'switch'" class="handler switch" :class="index==cur_index?'cur':''"
				:id="'switch'+index" @mouseover="select_cur(item,index,'switch')">
				<i class="el-icon-circle-close" @click="remove(item,index,'switch')"></i>
				<el-switch v-model="item.value">
				</el-switch>
			</div>



			<div v-if="item.name == 'select'" class="handler select" :class="index==cur_index?'cur':''"
				:id="'select'+index" @mouseover="select_cur(item,index,'switch')">
				<i class="el-icon-circle-close" @click="remove(item,index,'select')"></i>


				<el-select v-model="item.value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>

			<div v-if="item.name == 'slider'" class="handler slider" :class="index==cur_index?'cur':''"
				:id="'slider'+index" @mouseover="select_cur(item,index,'slider')">
				<i class="el-icon-circle-close" @click="remove(item,index,'slider')"></i>

				<template id="slider_template">
					<el-slider v-model="item.value"></el-slider>

				</template>

			</div>



		</div>



		<div id="visual_editor" class="visual-editor">
			<div class="container-panel">

				<h3> Input Attributes</h3>
				<el-form :inline="true" :model="form" ref="form1" class="form-inline">

					<template v-for="w in widget.list">

						<el-form-item :label="w.param+'：'">
							<template v-if="w.type==1">
								<el-popover placement="right-end" title="info" width="200" trigger="hover"
									:content="w.info">
									<el-input slot="reference" v-model="w.value" :placeholder="w.info" clearable>
									</el-input>

								</el-popover>
							</template>
							<!-- 颜色选项 -->
							<template v-if="w.type==4">
								<el-popover placement="right-end" title="info" width="200" trigger="hover"
									:content="w.info">

									<el-input slot="reference" v-model="w.value" :placeholder="w.info" clearable>
									</el-input>


								</el-popover>

								<el-color-picker v-model="w.value" :predefine="predefineColors">
								</el-color-picker>
							</template>

							<template v-if="w.type==2">
								<el-popover placement="right-end" title="info" width="200" trigger="hover"
									:content="w.info">
									<el-switch slot="reference" v-model="w.value" active-text="true"
										inactive-text="false">
									</el-switch>


								</el-popover>
							</template>


							<template v-if="w.type==3">
								<el-popover placement="right-end" title="info" width="200" trigger="hover"
									:content="w.info">
									<el-radio-group v-model="w.value" slot="reference">
										<template v-for="item in w.list">
											<el-radio :label="item">{{item}}</el-radio>
										</template>
										</el-checkbox-group>

								</el-popover>
							</template>
						</el-form-item>



					</template>



					<el-input type="textarea" :rows="20" v-model="code.config">
					</el-input>


					<el-button type="primary" size="mini" @click="create_config">生成文件</el-button>
				</el-form>



			</div>
		</div>



	</div>
	<div id="component">

		<el-row>
			<el-button v-for="(item,index) in component_list" round @click="add(item)">{{item.name}}</el-button>

		</el-row>

	</div>

	<div id="component_config">

		<table id="slider_config" style="display:none;">
			<thead>
				<tr>
					<th>参数</th>
					<th>说明</th>
					<th>类型</th>
					<th>可选值</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<!-- <tr>
					<td>value / v-model</td>
					<td>绑定值</td>
					<td>number</td>
					<td>—</td>
					<td>0</td>
				</tr> -->
				<!-- <tr>
					<td>min</td>
					<td>最小值</td>
					<td>number</td>
					<td>—</td>
					<td>0</td>
				</tr>
				<tr>
					<td>max</td>
					<td>最大值</td>
					<td>number</td>
					<td>—</td>
					<td>100</td>
				</tr> -->
				<tr>
					<td>disabled</td>
					<td>是否禁用</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<!-- <tr>
					<td>step</td>
					<td>步长</td>
					<td>number</td>
					<td>—</td>
					<td>1</td>
				</tr>
				<tr>
					<td>show-input</td>
					<td>是否显示输入框，仅在非范围选择时有效</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>show-input-controls</td>
					<td>在显示输入框的情况下，是否显示输入框的控制按钮</td>
					<td>boolean</td>
					<td>—</td>
					<td>true</td>
				</tr>
				<tr>
					<td>input-size</td>
					<td>输入框的尺寸</td>
					<td>string</td>
					<td>large / medium / small / mini</td>
					<td>small</td>
				</tr>
				<tr>
					<td>show-stops</td>
					<td>是否显示间断点</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>show-tooltip</td>
					<td>是否显示 tooltip</td>
					<td>boolean</td>
					<td>—</td>
					<td>true</td>
				</tr> -->
				<!-- <tr>
					<td>format-tooltip</td>
					<td>格式化 tooltip message</td>
					<td>function(value)</td>
					<td>—</td>
					<td>—</td>
				</tr> -->
				<!-- <tr>
					<td>range</td>
					<td>是否为范围选择</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>vertical</td>
					<td>是否竖向模式</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>height</td>
					<td>Slider 高度，竖向模式时必填</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>label</td>
					<td>屏幕阅读器标签</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>debounce</td>
					<td>输入时的去抖延迟，毫秒，仅在<code>show-input</code>等于true时有效</td>
					<td>number</td>
					<td>—</td>
					<td>300</td>
				</tr>
				<tr>
					<td>tooltip-class</td>
					<td>tooltip 的自定义类名</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr> -->
				<!-- <tr>
					<td>marks</td>
					<td>标记， key 的类型必须为 number 且取值在闭区间 <code>[min, max]</code> 内，每个标记可以单独设置样式</td>
					<td>object</td>
					<td>—</td>
					<td>—</td>
				</tr> -->
			</tbody>
		</table>

		<table id="inputNumber_config" style="display:none;">
			<thead>
				<tr>
					<th>参数</th>
					<th>说明</th>
					<th>类型</th>
					<th>可选值</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>

				<tr>
					<td>min</td>
					<td>设置计数器允许的最小值</td>
					<td>number</td>
					<td>—</td>
					<td>-Infinity</td>
				</tr>
				<tr>
					<td>max</td>
					<td>设置计数器允许的最大值</td>
					<td>number</td>
					<td>—</td>
					<td>Infinity</td>
				</tr>
				<tr>
					<td>step</td>
					<td>计数器步长</td>
					<td>number</td>
					<td>—</td>
					<td>1</td>
				</tr>
				<tr>
					<td>step-strictly</td>
					<td>是否只能输入 step 的倍数</td>
					<td>number</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>precision</td>
					<td>数值精度</td>
					<td>number</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>size</td>
					<td>计数器尺寸</td>
					<td>string</td>
					<td>large, small</td>
					<td>—</td>
				</tr>
				<tr>
					<td>disabled</td>
					<td>是否禁用计数器</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>controls</td>
					<td>是否使用控制按钮</td>
					<td>boolean</td>
					<td>—</td>
					<td>true</td>
				</tr>
				<tr>
					<td>controls-position</td>
					<td>控制按钮位置</td>
					<td>string</td>
					<td>right</td>
					<td>-</td>
				</tr>
				<tr>
					<td>name</td>
					<td>原生属性</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>label</td>
					<td>输入框关联的label文字</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>placeholder</td>
					<td>输入框默认 placeholder</td>
					<td>string</td>
					<td>-</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

		<table id="switch_config" style="display:none;">
			<thead>
				<tr>
					<th>参数</th>
					<th>说明</th>
					<th>类型</th>
					<th>可选值</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>

				<tr>
					<td>disabled</td>
					<td>是否禁用</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>width</td>
					<td>switch 的宽度（像素）</td>
					<td>number</td>
					<td>—</td>
					<td>40</td>
				</tr>
				<tr>
					<td>active-icon-class</td>
					<td>switch 打开时所显示图标的类名，设置此项会忽略 active-text</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>inactive-icon-class</td>
					<td>switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>active-text</td>
					<td>switch 打开时的文字描述</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>inactive-text</td>
					<td>switch 关闭时的文字描述</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>active-value</td>
					<td>switch 打开时的值</td>
					<td>boolean / string / number</td>
					<td>—</td>
					<td>true</td>
				</tr>
				<tr>
					<td>inactive-value</td>
					<td>switch 关闭时的值</td>
					<td>boolean / string / number</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>active-color</td>
					<td>switch 打开时的背景色</td>
					<td>string</td>
					<td>—</td>
					<td>#409EFF</td>
				</tr>
				<tr>
					<td>inactive-color</td>
					<td>switch 关闭时的背景色</td>
					<td>string</td>
					<td>—</td>
					<td>#C0CCDA</td>
				</tr>
				<tr>
					<td>name</td>
					<td>switch 对应的 name 属性</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>validate-event</td>
					<td>改变 switch 状态时是否触发表单的校验</td>
					<td>boolean</td>
					<td>-</td>
					<td>true</td>
				</tr>
			</tbody>
		</table>



		<table id="select_config" style="display:none;">
			<thead>
				<tr>
					<th>参数</th>
					<th>说明</th>
					<th>类型</th>
					<th>可选值</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>

				<tr>
					<td>multiple</td>
					<td>是否多选</td>
					<td>boolean</td>
					<td>—</td>
					<td>fixed_value_attribute</td>
				</tr>
				<tr>
					<td>disabled</td>
					<td>是否禁用</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>value-key</td>
					<td>作为 value 唯一标识的键名，绑定值为对象类型时必填</td>
					<td>string</td>
					<td>—</td>
					<td>value</td>
				</tr>
				<tr>
					<td>size</td>
					<td>输入框尺寸</td>
					<td>string</td>
					<td>medium / small / mini</td>
					<td>—</td>
				</tr>
				<tr>
					<td>clearable</td>
					<td>是否可以清空选项</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>collapse-tags</td>
					<td>多选时是否将选中值按文字的形式展示</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>multiple-limit</td>
					<td>多选时用户最多可以选择的项目数，为 0 则不限制</td>
					<td>number</td>
					<td>—</td>
					<td>0</td>
				</tr>
				<tr>
					<td>name</td>
					<td>select input 的 name 属性</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>autocomplete</td>
					<td>select input 的 autocomplete 属性</td>
					<td>string</td>
					<td>—</td>
					<td>off</td>
				</tr>

				<tr>
					<td>placeholder</td>
					<td>占位符</td>
					<td>string</td>
					<td>—</td>
					<td>请选择</td>
				</tr>
				<tr>
					<td>filterable</td>
					<td>是否可搜索</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>allow-create</td>
					<td>是否允许用户创建新条目，需配合 <code>filterable</code> 使用</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<!-- <tr>
				<td>filter-method</td>
				<td>自定义搜索方法</td>
				<td>function</td>
				<td>—</td>
				<td>—</td>
			</tr>
			<tr>
				<td>remote</td>
				<td>是否为远程搜索</td>
				<td>boolean</td>
				<td>—</td>
				<td>false</td>
			</tr>
			<tr>
				<td>remote-method</td>
				<td>远程搜索方法</td>
				<td>function</td>
				<td>—</td>
				<td>—</td>
			</tr>
			<tr>
				<td>loading</td>
				<td>是否正在从远程获取数据</td>
				<td>boolean</td>
				<td>—</td>
				<td>false</td>
			</tr>
			<tr>
				<td>loading-text</td>
				<td>远程加载时显示的文字</td>
				<td>string</td>
				<td>—</td>
				<td>加载中</td>
			</tr> -->
				<tr>
					<td>no-match-text</td>
					<td>搜索条件无匹配时显示的文字，也可以使用<code>slot="empty"</code>设置</td>
					<td>string</td>
					<td>—</td>
					<td>无匹配数据</td>
				</tr>
				<tr>
					<td>no-data-text</td>
					<td>选项为空时显示的文字，也可以使用<code>slot="empty"</code>设置</td>
					<td>string</td>
					<td>—</td>
					<td>无数据</td>
				</tr>
				<tr>
					<td>popper-class</td>
					<td>Select 下拉框的类名</td>
					<td>string</td>
					<td>—</td>
					<td>—</td>
				</tr>
				<tr>
					<td>reserve-keyword</td>
					<td>多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词</td>
					<td>boolean</td>
					<td>—</td>
					<td>false</td>
				</tr>
				<tr>
					<td>default-first-option</td>
					<td>在输入框按下回车，选择第一个匹配项。需配合 <code>filterable</code> 或 <code>remote</code> 使用</td>
					<td>boolean</td>
					<td>-</td>
					<td>false</td>
				</tr>
				<tr>
					<td>popper-append-to-body</td>
					<td>是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false</td>
					<td>boolean</td>
					<td>-</td>
					<td>true</td>
				</tr>
				<tr>
					<td>automatic-dropdown</td>
					<td>对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单</td>
					<td>boolean</td>
					<td>-</td>
					<td>false</td>
				</tr>
			</tbody>
		</table>



	</div>


</body>


</html>
<script src="index.js"></script>